<template>
	<view class="infos-box">
		<SearchCom :data="queryParams" />
		<text class="title">团队成员（{{val}}人）</text>
		<Empty v-if="!data.length" />
		<view class="main-box" v-else>
			<view class="page-sc">
				<uni-card spacing="20rpx" v-for="(item, index) in data" :key="index">
					<template #title>
						<view class="card-header df-between">
							<view class="left df-c">
								<image src="@/static/home/circle.png" mode="widthFix" class="icon"></image>
								<text>{{item.name}}</text>
								<text>{{item.phone}}</text>
							</view>
						</view>
						<view class="content-box">
							<text>加入时间：{{item.time}}</text>
						</view>
					</template>
					<view class="footer-box df-between">
						<view class="df-column item">
							<view class="top">
								<text>￥</text>
								<text class="val">540.00</text>
							</view>
							<text>下级收入</text>
						</view>
						<view class="df-column item">
							<view class="top">
								<text>￥</text>
								<text class="val">540.00</text>
							</view>
							<text>次级数量</text>
						</view>
						<view class="df-column item">
							<view class="top">
								<text>￥</text>
								<text class="val">540.00</text>
							</view>
							<text>我的奖励</text>
						</view>
					</view>
				</uni-card>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import SearchCom from '@/components/sarchCom/index.vue'
	import Empty from '@/components/empty/index.vue'
	import Card from '@/components/card/index.vue'
	const val = ref(0)
	const queryParams = ref({
		name: '',
		time: ''
	})
	const data = ref([{
			name: '思***',
			phone: '150****1234',
			time: '2025.12.12  14:25'
		},
		{
			name: '思***',
			phone: '150****1234',
			time: '2025.12.12  14:25'
		},
		{
			name: '思***',
			phone: '150****1234',
			time: '2025.12.12  14:25'
		}
	])
</script>

<style lang="scss" scoped>
	.infos-box {
		padding: 0 30rpx;
		box-sizing: border-box;
		overflow: hidden;

		&>.title {
			color: #666;
			font-size: 30rpx;

		}

		.main-box {
			width: 100%;
			display: flex;
			flex-direction: column;
			position: absolute;
			top: 160rpx;
			overflow: hidden;
			left: 50%;
			transform: translateX(-50%);

			.page-sc {
				height: 80vh;
				overflow-y: scroll;

				.card-header {
					&>.left {
						color: #333333;
						font-size: 30rpx;
						font-weight: Bold;

						&>.icon {
							width: 50rpx;
							height: 50rpx;
							margin-right: 20rpx;
						}
					}

					&>.right {
						color: #F44242;
						font-size: 24rpx;
					}
				}

				.content-box {
					display: flex;
					flex-wrap: wrap;
					color: #999999;
					font-size: 24rpx;
					margin: 14rpx 30rpx 0rpx 20rpx;

					&>.item {
						background-color: #F5F7FB;
						border-radius: 8rpx;
						padding: 8rpx 12rpx;
						box-sizing: border-box;
						font-size: 24rpx;
					}
				}

				.footer-box {
					font-size: 24rpx;
					color: #999;
					text-align: center;
					background-color: #F5F7FB;
					box-sizing: border-box;
					height: 154rpx;

					&>.item {
						width: 33.33%;

						&:not(:first-child) {
							position: relative;

							&:before {
								content: '';
								width: 2rpx;
								height: 80rpx;
								position: absolute;
								top: 10rpx;
								left: 0;
								background-color: #DDDDDD;
							}
						}

						.top {
							color: #333333;

							&>.val {
								font-size: 36rpx;
							}
						}
					}
				}
			}
		}
	}
</style>